<!-- 资讯管理 -->
<template>
  <div class="app-container">
    <div class="container">
      <el-row>
        <el-form :model="form"  label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username" placeholder="用户名" clearable :readonly="!isAdd"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" :placeholder="isAdd ? '密码' : '留空将不会修改密码'" :show-password="true" clearable  />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="状态" clearable>
              <el-option v-for="item in Object.keys(statusDesc)" :label="statusDesc[item]" :key="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="权限">
            <el-select v-model="form.role" placeholder="权限" clearable>
              <el-option v-for="item in Object.keys(roleDesc)" :label="roleDesc[item]" :key="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'

import { createOrUpdateInfo, getStatus, getAdminById, getRole } from '@/api/admin'
import { utilsMixin } from '@/mixin/utils'

import { getUploadImg } from '@/api/dashboard'


export default {
  name: 'AdminUserCreate',
  mixins: [utilsMixin],
  components: { Plus },
  data() {
    return {
      form: {
        id: '',
        username: '',
        password: '',
        status: '',
        role: ''
      },
      isAdd:false,
      uploadUrl: getUploadImg(),
      statusDesc: getStatus(),
      roleDesc: getRole()
    }
  },
  created() {
    if(this.$route.params && this.$route.params.id) {
        if(this.$route.params.id !== 'create'){
            this.form.id = this.$route.params.id
            this.fetchData()
        }else{
            this.isAdd = true
        }
    }
  },
  methods: {
    fetchData() {
      getAdminById(this.form.id).then(response => {
        this.form = Object.assign(this.form, response.data, { status: response.data.status.toString(), password: '' })
      }).catch(() => {
        
      })
    },
    onCreate() {
      this.clearForm()
      this.addFormVisible = true
      this.isAdd = true
    },
    onSubmit() {
      createOrUpdateInfo(this.form).then(respones => {
          this.form.id = respones.data
          this.$message({ message: '保存成功', type: 'success' })
      }).catch(() => {
        
      })
    }
  }
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>